<template>
  <a-drawer v-model:visible="visible" class="custom-class" title="全局配置-滤镜设置" placement="right" width="800"
    :maskClosable="false">
    <a-tabs v-model:activeKey="activeTab" type="card" @change="changeTab">
      <a-tab-pane :key="1" tab="智能匹配">
        <p style="color: rgb(115 122 135)">为视频混剪组合智能匹配滤镜</p>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="自定义">
        <div class="custom-secendTab">
          <a-tabs v-model:activeKey="customSecendTabActiveKey" @change="changeCustomSecendTab">
            <a-tab-pane v-for="item in customItemTabList" :key="item.id" :tab="item.name">
              <div class="custom-list" v-if="item.materials.length">
                <div class="custom-item" v-for="ele in item.materials" :key="ele.id"
                  @click="toggleItem(ele.scene_type)">
                  <template v-if="ele.material_type == 'image'">
                    <img :src="ele.material_url" alt="">
                  </template>
                  <template v-else-if="ele.material_type == 'video'">
                    <video :class="{
                      'custom-item-active': isSelected(ele.scene_type),
                    }" class="custom-item-img" :src="ele.material_url" alt="" name="media" id="videoPlayer"
                      @mouseenter="playVideo" @mouseleave="pauseVideo" />
                  </template>
                  <span>{{ ele.material_name }}</span>
                  <a-checkbox class="checkbox" v-if="isSelected(ele.scene_type)"
                    :checked="filter_config.filters.includes(ele.scene_type)"
                    @change="toggleItem(ele.scene_type)"></a-checkbox>
                </div>
              </div>
              <div class="custom-list" v-else style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                ">
                <a-empty style="height: 100%" />
              </div>

              <a-row type="flex" style="align-items: center; margin-top: 15px">
                <a-col :span="3"> 匹配方式 </a-col>
                <!-- {{ targetData }} -->
                <a-radio-group v-model:value="filter_config.global">
                  <a-radio :value="0">每组镜头组随机匹配一个滤镜</a-radio>
                  <a-radio :value="1">所有镜头组匹配相同滤镜</a-radio>
                </a-radio-group>
              </a-row>
            </a-tab-pane>
            <template #rightExtra>
              <a-button type="text" size="small" v-if="itemSelectData >= 1">已选择{{ itemSelectData }}
              </a-button>
              <a-button type="link" size="small" @click="toggleChecked('add')">全选</a-button>
              <a-button type="link" size="small" @click="toggleChecked('del')"
                v-show="itemSelectData >= 1">全部取消</a-button>
            </template>
          </a-tabs>
        </div>
      </a-tab-pane>
    </a-tabs>
    <template #footer>
      <a-row type="flex" justify="end">
        <a-button style="margin-right: 8px" type="primary" @click="onClose('submit')">确认添加</a-button>
        <a-button @click="onClose('close')">取消</a-button>
      </a-row>
    </template>
  </a-drawer>
</template>
<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  onMounted,
  ref,
  nextTick,
} from "vue";
import {
  QuestionCircleOutlined,
  UploadOutlined,
  CloudUploadOutlined,
  CaretRightOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import { useStore } from "vuex";

import request from "@/common/utils/request";
import { message } from "ant-design-vue";
export default defineComponent({
  components: {
    QuestionCircleOutlined,
    UploadOutlined,
    CloudUploadOutlined,
    CaretRightOutlined,
    CloseOutlined,
  },
  setup() {
    const state = reactive({
      visible: false,
      customSecendTabActiveKey: 1,
      customItemActiveKey: 0,
      // 标头选项
      customItemTabList: [],
      customItemIsChecked: false,
      activeTab: 1,
      currentPlaying: null,
    });

    const store = useStore();
    // 获取仓库中的数据
    const VideoMashup = computed(() => {
      return store.state.videoMixCut.VideoMashup;
    });
    // 复制的滤镜数据
    const filter_config = ref({});

    onMounted(() => { });

    const getfilterList = async () => {
      const res = await request.get(
        "/work_ai",
        "/user/shotstack/material/clip/filter/list"
      );
      console.log(res, "滤镜结果");
      if (res.result.length > 0) {
        state.customItemTabList = res.result;
        state.customSecendTabActiveKey = res.result[0].id;
      }
    };
    // 打开弹窗
    const showDrawer = () => {
      getfilterList();
      filter_config.value = JSON.parse(
        JSON.stringify(VideoMashup.value.filter_config)
      );
      if (filter_config.value.type == 0) {
        state.activeTab = 1;
      } else {
        state.activeTab = filter_config.value.type;
      }
      console.log(filter_config.value, "页面打开，滤镜效果");
      console.log(state.activeTab);
      state.visible = true;
    };
    // 关闭弹窗
    const onClose = (type) => {
      if (type == "submit") {
        if (state.activeTab == 2 && filter_config.value?.filters.length == 0) {
          message.error("请选择自定义滤镜");
          return;
        }
        filter_config.value.type = state.activeTab;
        // 保存到仓库
        store.dispatch("videoMixCut/SetVideoMashupItem", {
          key: "filter_config",
          value: filter_config.value,
        });
      }
      console.log(filter_config.value);
      state.visible = false;
    };
    const changeTab = (e) => {
      state.activeTab = e;
    };
    // 修改当前高亮的选项
    const changeCustomSecendTab = (e) => {
      state.customSecendTabActiveKey = e;
    };
    // 当前高亮项的data
    const targetData = computed(() => {
      return (
        state.customItemTabList.find(
          (ele) => ele.id == state.customSecendTabActiveKey
        ) || []
      );
    });
    // 每一项的被选择条数
    const itemSelectData = computed(() => {
      if (!!targetData.value) {
        const selectNum = targetData.value?.materials?.filter((ele) =>
          filter_config.value.filters.includes(ele.scene_type)
        ).length;
        return selectNum;
      } else {
        return 0;
      }
    });
    // 每一项的总条数
    const itemTotalData = computed(() => {
      if (!!targetData.value) {
        return targetData.value.materials.length;
      } else {
        return 0;
      }
    });

    // 全选和反全选
    const toggleChecked = (type) => {
      if (!!targetData.value) {
        // 全选
        const addArr = targetData.value.materials.map((ele) => ele.scene_type);
        if (type == "add") {
          filter_config.value.filters = [
            ...new Set([...filter_config.value.filters, ...addArr]),
          ];
        } else {
          // 反选
          const items = targetData.value.materials.map((ele) => ele.scene_type);
          filter_config.value.filters = filter_config.value.filters.filter(
            (ele) => {
              return !items.includes(ele);
            }
          );
        }
      }
    };
    // 点击选择某项
    const toggleItem = (scene_type) => {
      if (filter_config.value.filters.includes(scene_type)) {
        filter_config.value.filters = filter_config.value.filters.filter(
          (ele) => ele !== scene_type
        );
      } else {
        filter_config.value.filters.push(scene_type);
      }
    };

    // 判断某项是否被选中
    const isSelected = (isSelected) => {
      return filter_config.value.filters.includes(isSelected);
    };
    // 鼠标移入
    const playVideo = (event) => {
      // 如果有正在播放的视频，先将其重置
      if (state.currentPlaying) {
        state.currentPlaying.pause();
        state.currentPlaying.currentTime = 0; // 回退到视频的起始点
      }
      // 播放当前视频
      event.target.play();
      // 更新当前播放的视频
      state.currentPlaying = event.target;
    };
    // 鼠标移出
    const pauseVideo = (event) => {
      // 只有当鼠标移出当前播放的视频时才暂停
      if (state.currentPlaying && event.target === state.currentPlaying) {
        state.currentPlaying.pause();
      }
    };
    return {
      ...toRefs(state),
      showDrawer,
      filter_config,
      store,
      VideoMashup,
      itemSelectData,
      targetData,
      itemTotalData,
      onClose,
      changeTab,
      changeCustomSecendTab,
      toggleChecked,
      toggleItem,
      isSelected,
      playVideo,
      pauseVideo,
    };
  },
});
</script>
<style lang="less" scoped>
.custom-secendTab {
  padding: 10px;

  .custom-list {
    display: grid;
    margin-top: 13px;
    max-height: 540px;
    min-height: 82px;
    grid-gap: 12px;
    grid-template-columns: repeat(5, 1fr);
    overflow-y: scroll;
    border: 1px solid #ededee;
    padding: 20px;

    .custom-item {
      align-items: center;
      display: flex;
      flex-direction: column;
      position: relative;
      box-sizing: border-box;
      cursor: pointer;

      img {
        width: 125px;
        object-fit: cover;
      }

      video {
        width: 125px;
      }
    }

    .custom-item-img {
      border: 2px solid transparent;
      border-radius: 3px;
      box-sizing: border-box;
      cursor: pointer;
      height: 68px;
      object-fit: cover;
      width: 100%;
    }

    .checkbox {
      position: absolute;
      top: -5px;
      left: 0;
    }

    .custom-item-active {
      position: relative;
      border: 2px solid #2878ff;
      // &::after{
      //   content: '√';
      //   height: 20px;
      //   width: 20px;
      //   background-color: #1664ff;
      //   position: absolute;
      //   left: 0;
      //   top: 0;
      //   z-index: 99;
      // }
    }
  }
}
</style>
